<template>
  <div class="market-product-page">
    <div class="menu">
      <MenuItem :index="2"></MenuItem>
    </div>
    <el-scrollbar class="colR">
      <el-form inline>
        <el-form-item>
          <el-input
            placeholder="请输入商品标题"
            :style="{ width: '300px' }"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="坚果" :style="{ width: '120px' }"></el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="泥土之下"
            :style="{ width: '120px' }"
          ></el-select>
        </el-form-item>
        <el-form-item label="平台">
          <el-input placeholder="抖音"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" align="middle" :style="{ marginBottom: '10px' }">
        <div class="text">功效：</div>
        <el-checkbox-group v-model="query.c1">
          <el-checkbox label="解腻解辣" />
          <el-checkbox label="调节血糖" />
          <el-checkbox label="补充能量" />
          <el-checkbox label="抗疲劳" />
          <el-checkbox label="解腻" />
          <el-checkbox label="熬夜提神" />
          <el-checkbox label="脾胃" />
          <el-checkbox label="抗饿" />
          <el-checkbox label="免疫力" />
          <el-checkbox label="高蛋白健身" />
        </el-checkbox-group>
        <el-button type="text" :style="{ marginLeft: '20px' }">更多</el-button>
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '10px' }">
        <div class="text">口味：</div>
        <el-checkbox-group v-model="query.c2">
          <el-checkbox label="咸奶茶" />
          <el-checkbox label="草莓味酸奶" />
          <el-checkbox label="冲饮" />
          <el-checkbox label="粗粮" />
          <el-checkbox label="蓝莓风味" />
          <el-checkbox label="粗粮即食" />
          <el-checkbox label="女神咖" />
          <el-checkbox label="即食健身" />
          <el-checkbox label="营养米糊" />
          <el-checkbox label="酸奶" />
          <el-checkbox label="控糖" />
        </el-checkbox-group>
        <el-button type="text" :style="{ marginLeft: '20px' }">更多</el-button>
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '10px' }">
        <div class="text">成分：</div>
        <el-checkbox-group v-model="query.c3">
          <el-checkbox label="美式白芸豆" />
          <el-checkbox label="办公泡茶水" />
          <el-checkbox label="猴头菇养胃" />
          <el-checkbox label="薏仁茨实" />
          <el-checkbox label="降糖奶粉" />
          <el-checkbox label="饮南杏仁粉" />
          <el-checkbox label="无糖减燃" />
          <el-checkbox label="浓缩益生元" />
          <el-checkbox label="普尔无糖" />
        </el-checkbox-group>
        <el-button type="text" :style="{ marginLeft: '20px' }">更多</el-button>
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '10px' }">
        <div class="text">核心技术：</div>
        <el-checkbox-group v-model="query.c4">
          <el-checkbox label="鲜榨椰汁" />
          <el-checkbox label="低温鲜奶" />
          <el-checkbox label="脱脂" />
          <el-checkbox label="免煮代餐" />
          <el-checkbox label="农科院nfc" />
          <el-checkbox label="浓缩汁" />
          <el-checkbox label="浓缩纯牛奶" />
          <el-checkbox label="冷压榨" />
          <el-checkbox label="发酵菌粉" />
          <el-checkbox label="冻干" />
        </el-checkbox-group>
        <el-button type="text" :style="{ marginLeft: '20px' }">更多</el-button>
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '16px' }">
        <div class="text">营销概念：</div>
        <el-checkbox-group v-model="query.c5">
          <el-checkbox label="早餐礼盒" />
          <el-checkbox label="精选牧场" />
          <el-checkbox label="东方甄选" />
          <el-checkbox label="家庭装早餐" />
          <el-checkbox label="摩登罐" />
          <el-checkbox label="咖啡礼盒" />
          <el-checkbox label="非浓缩" />
          <el-checkbox label="饮料礼盒" />
          <el-checkbox label="调酒" />
        </el-checkbox-group>
        <el-button type="text" :style="{ marginLeft: '20px' }">更多</el-button>
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '24px' }">
        <div class="text">产地：</div>
        <el-select
          placeholder="产地"
          :style="{ width: '120px', marginRight: '24px' }"
        ></el-select>
        <el-select
          placeholder="河北"
          :style="{ width: '120px', marginRight: '24px' }"
        ></el-select>
        <el-select
          placeholder="沧州"
          :style="{ width: '120px', marginRight: '48px' }"
        ></el-select>
        <div class="text">时间：</div>
        <div>
          <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <el-button type="primary" :style="{ marginLeft: '15px' }"
          >搜索</el-button
        >
      </el-row>
      <el-row type="flex" align="middle" :style="{ marginBottom: '30px' }">
        <div class="text">已选：</div>
        <el-tag size="large" :style="{ marginRight: '12px' }">调节血糖</el-tag>
        <el-tag size="large">免煮代餐</el-tag>
      </el-row>
      <el-radio-group v-model="tabPosition" size="large">
        <el-radio-button label="价量分析">价量分析</el-radio-button>
        <el-radio-button label="品牌分析">品牌分析</el-radio-button>
        <el-radio-button label="店铺分析">店铺分析</el-radio-button>
        <el-radio-button label="商品属性">商品属性</el-radio-button>
      </el-radio-group>
      <el-row class="tools" type="flex" justify="space-between">
        <img src="../../assets/market/1.png" class="image" alt="" />
        <img src="../../assets/market/2.png" class="image" alt="" />
        <img src="../../assets/market/3.png" class="image" alt="" />
      </el-row>
      <div class="lists">
        <img src="../../assets/market/4.png" class="image" alt="" />
        <img src="../../assets/market/5.png" class="image" alt="" />
        <img src="../../assets/market/6.png" class="image" alt="" />
        <img src="../../assets/market/7.png" class="image" alt="" />
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import MenuItem from "./menu.vue";
const tabPosition = ref("价量分析");
const query = reactive({
  c1: ["调节血糖"],
  c2: [],
  c3: [],
  c4: ["免煮代餐"],
  c5: [],
});
</script>
<style lang="scss">
.market-product-page {
  display: flex;
  height: calc(100vh - 60px);
  .menu {
    background-color: #fff;
  }
  .colR {
    margin-left: auto;
    width: 1%;
    flex: 1;
    margin-left: 20px;
    background-color: #fff;
    padding: 20px 20px 0;
    height: calc(100vh - 80px);
    .tools {
      background-color: #eee;
      border-radius: 12px;
      margin-top: 20px;
      padding: 20px;
      .image {
        width: calc(100% / 3 - 10px);
      }
    }
    .lists {
      clear: both;
      overflow: hidden;
      .image {
        width: 100%;
      }
    }
  }
}
</style>
